<template>
  <a-modal
    :title='title'
    :visible='show'
    destroyOnClose
    footer=''
    okText='确定'
    @cancel='handleModalCancel'
  >

    <div class='money'>
      <div class='input-title'>公司名称</div>
      <a-input v-model='companyName' disabled placeholder='请输入公司名称' type='text'></a-input>
    </div>
    <div class='money'>
      <div class='input-title'>合同金额</div>
      <a-input v-model='contractAmount' disabled placeholder='请输入合同金额' type='text'></a-input>
    </div>
    <div class='money'>
      <div class='input-title'>审批流程</div>
      <a-select v-model='approvalLabel' :disabled='flag' placeholder='请选择审批流程' style='width: 100%'
                @change='changeExamine'>
        <a-select-option v-for='item in goldMedalList' :key='item'>
          {{ item }}
        </a-select-option>
      </a-select>
    </div>
    <div v-if='selectShow' class='money'>
      <div class='input-title'>选择审批人</div>
      <div class='select-btn'>
        <div>
          <a-select v-model='departmentValue' style='width: 192px' @change='typeChange'>
            <a-select-option v-for='item in options' :key='item.key'>
              {{ item.departName }}
            </a-select-option>
          </a-select>
        </div>
        <div>
          <a-select v-model='ownerUservalue' style='width: 192px' @change='valChange'>
            <a-select-option v-for='item in roleList' :key='item.id'>
              {{ item.username }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
    <div class='select-content'>
      <div class='select-title'>
        <div><span>审批意见</span></div>
      </div>
      <div class='select-input'>
        <a-input v-model='approvalOpinion' placeholder='请输入审批意见' type='textarea'></a-input>
      </div>
    </div>
    <div class='select-content'>
      <div class='select-title'>
        <div><span>附件</span> 附件选填，最多五张，每张大小不超过1m</div>
      </div>
      <div class='select-input'>
        <!-- <j-image-upload class="avatar-uploader" text="上传" v-model="model.path"></j-image-upload> -->
        <a-upload
          :action='uploadAction'
          :class="[fileList.length > 4 ? 'image-upload-single-over' : '']"
          :file-list='fileList'
          :headers='headers'
          list-type='picture-card'
          @change='handleChange'
          @preview='handlePreview'
        >
          <div v-if='fileList.length < 8'>
            <a-icon type='plus' />
            <div class='ant-upload-text'>上传</div>
          </div>
        </a-upload>
        <a-modal :footer='null' :visible='previewVisible' @cancel='handleCancel'>
          <img :src='previewImage' alt='example' style='width: 100%' />
        </a-modal>
      </div>
    </div>
    <div class='sumbit_btn'>
      <a-button v-if='selectShow' type='primary' @click='handleModal(4)'>通过</a-button>
      <a-button v-else type='primary' @click='handleModal(2)'>通过</a-button>
      <a-button @click='handleModal(3)'>驳回</a-button>
    </div>
  </a-modal>
</template>

<script>
import { Approval } from '@/api/taskManage'
import {
  getRoleSelect
} from '@/api/threadManage'

export default {
  data() {
    return {
      title: '',
      id: '',
      show: false,
      fileList: [],
      headers: {},
      contractAmount: '', // 合同金额
      companyName: '', // 公司名称
      approvalLabel: '',
      approvalProcess: '', // 审批流程
      approvalOpinion: '', // 审批意见
      goldMedalList: ['常规审批', '领导特批'],
      previewImage: '',
      updateBy: '',
      approvalPersonId: '',
      approvalPersonName: '',
      superiorApprovalStatus: '',
      previewVisible: false,
      options: [],
      roleList: [],
      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
      departmentValue: [],
      ownerUservalue: '',
      selectShow: false,
      status: 0,
      flag: false
    }
  },
  methods: {
    handleModalCancel() {
      this.show = false
    },
    async handleModal(superiorApprovalStatus) {
      const approvalImage = []
      this.fileList.forEach((item) => {
        approvalImage.push(item.response.message)
      })
      const params = {
        approvalImage: JSON.stringify(approvalImage),
        approvalOpinion: this.approvalOpinion,
        approvalProcess: this.approvalProcess,
        id: this.id,
        superiorApprovalStatus,
        updateBy:this.updateBy
      }
      if (this.flag === false) {
        params.approvalPersonId = this.approvalPersonId
      }
      console.log(params, this.status)
      this.setApproval(params)
    },
    async setApproval(params) {
      const res = await Approval(params)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.show = false
        this.approvalImage = ''
        this.approvalOpinion = ''
        this.approvalProcess = ''
        this.id = ''
        this.superiorApprovalStatus = ''
        this.updateBy = ''
        this.approvalPersonId = ''
        this.fileList = []
        this.$emit('examineClose');
      }
    },
    changeExamine(val) {
      if (val === '常规审批') {
        this.approvalProcess = 1
        this.selectShow = false
      } else {
        this.selectShow = true
        this.approvalProcess = 2
      }
    },
    async typeChange(id) {
      const res = await getRoleSelect({ id })
      if (res.code === 0) {
        this.roleList = res.result.records
      }
    },
    valChange(id) {
      this.approvalPersonId = id
    },
    handleCancel() {
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    }
  }
}
</script>

<style lang='less' scoped>
.sumbit_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;

  button {
    margin: 0 20px;
  }
}

.money {
  margin: 10px 0;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.input-title {
  width: 100px;
  color: #000000;
}


.select-title {
  margin-bottom: 10px;
}

.select-title span {
  font-size: 14px;
  color: #000000;
  margin-right: 10px;
}

.select-input .ant-input {
  height: 120px;
}

.select-content {
  margin: 20px 10px 0 24px;

  .select-title {
    display: flex;
    justify-content: space-between;

    div {
      flex: 1;
    }
  }

  .select-btn {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;

    div {
      flex: 1;
    }
  }
}

.select-btn {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;

  div {
    flex: 1;
    margin: 0 2px;
  }
}
</style>